<script setup>
import { useStore } from 'vuex'
import { ref } from 'vue'
import router from '../../router/router'
import storage from '../../utils/storage'

const store = useStore()
const username = ref(store.state.userStore.userInfo.data.data.studentName)

const exam = () => {
  router.push({ path: '/myExam' })
}

const manage = () => {
  router.push('/manager')
}

const practice = () => {
  // const isPractice = ref(true)
  router.push('/startExam')
}
const exit = () => {
  router.push('/')
  storage.clearAll()
}
</script>

<template>

<div class="common-layout">
    <el-container>
<el-header>
   <div id="student">
  <el-row class="padding-50">
    <el-col :span="24">
    <ul class="list">
      <li class="logo"><span>Exam-Online</span></li>
      <li><a href="javascript:;" @click="exam()">我的试卷</a></li>
      <li><a href="javascript:;" @click="practice()">我的练习</a></li>
      <li><router-link to="/scoreTable">我的分数</router-link></li>
      <li><router-link to="/message">给我留言</router-link></li>
  <li class="right">
    <el-dropdown>
    <span class="el-dropdown-link">
      <div class="box"> <a href="javacript:;">{{username}}</a></div>
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item> <p @click="manage()">管理中心</p></el-dropdown-item>
        <el-dropdown-item><p class="exit" @click="exit()">退出</p></el-dropdown-item>

      </el-dropdown-menu>
    </template>
  </el-dropdown>
  </li>

    </ul>
    </el-col>
  </el-row>
      </div>
</el-header>

      <el-main class="main">
        <router-view></router-view>
      </el-main>

    </el-container>
  </div>

</template>

<style scoped>

.box{
  margin-top: 25px;
  font-size: 16px;
}
.right .icon {
  margin-right: 6px;

}
#student .padding-50 {
  margin: 0 auto;
  padding: 0 50px;
  box-shadow: 0 0 10px 4px rgba(1,149,255,0.1);
  background-color: #fff;
}
.list a {
  text-decoration: none;
  color: #334046;
}
li {
  list-style: none;
  height: 60px;
  line-height: 60px;
}
#student .list{
  display: flex;
}
#student .list li {
  padding: 0 20px;
  cursor: pointer;
}
#student .list li:hover {
  background-color: #0195ff;
  transition: all 2s ease;
}
#student .list li:hover a {
  color: #fff;
}
#student .list .right {
  margin-left: auto;
  position: relative;
}
#student .list li.right :hover a {
  color: #000;
}
#student .list .logo {
  display: flex;
  font-weight: bold;
  color: #2f6c9f;
}
#student .list .logo i {
  font-size: 50px;
}
.right .msg {
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0px;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  border-bottom: 3px solid #0195ff;
  background-color: #fff;
}
.right .msg p {
  height: 40px;
  line-height: 40px;
  width: 105px;
}
.right .msg p:hover {
  background-color: #0195ff;
}
</style>
